<template>
	<view>
		<view class="nav-title flex align-center justify-between py-2 px-2">
			<image @click="getBack()" class="back-img" :src="type?'../../static/images/back.png':'../../static/images/loading.gif'"></image>
			<text class="font">预警设备</text>
			<view></view>
		</view>
		<map v-if="longitude != '' && latitude != ''" :longitude="longitude" :latitude="latitude" :markers="mapList" @markertap="location" :scale="20">
			<cover-view v-if="is_type" class="map-button" @click="getLocation">查看报警记录</cover-view>
		</map>
	</view>
</template>

<script>
	import {
		postChargePileList,
		postChargePileDetail
	} from "../../api/home.js";
	import {
		wechatConfig
	} from '../../api/public.js';
	import { postWarnList } from "../../api/user.js"
	export default {
		data() {
			return {
				latitude: "",
				longitude: "",
				type: true,
				mapList: [],
				is_type: false, // 是否选中位置
				locationObj: {}, // 选中的位置信息
			}
		},
		
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			// #ifdef H5
			this.init()
			// #endif
		},
		methods: {
			init(){
					this.getUserlocation()
			},
			async initFunciton() {
				var res = await postWarnList({token: uni.getStorageSync('token')})
				if (res.data.code == 1) {
					var content = res.data.data;
					content.forEach(item => {
						item.iconPath = "../../static/images/m1.png";
					})
					content.unshift({
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: "../../static/images/location.png"
					})
					uni.hideLoading()
					this.mapList = content;
				}
			},
			
			// 获取经纬度
			getUserlocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					isHighAccuracy: true,
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude
					},
					complete() {
						that.initFunciton()
					}
				})
			},
			
			// 点击标记点
			location(e) {
				var id = e.detail.markerId;
				this.is_type = true;
				this.mapList.forEach(item => {
					if(id == item.id) {
						item.scale = 15
						this.locationObj = item
					}
				})
			},
			
			
			// 到这去
			getLocation() {
				uni.navigateTo({
					url: "/pages/user/yj-list?name=" + this.locationObj.name
				})
			},
			
			getBack() {
				location.href = ""
			}
		},
		onUnload() {
			window.opener=null;
			window.open('','_self');
			window.close();
		}
	}
</script>

<style>
	map {
		width: 100vw;
		height: 100vh;
	}
	
	.top-detail {
		width: 100%;
		height: 180rpx;
		background-color: #fff;
		position: fixed;
		border-radius: 0 0 10rpx 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #6b6b6b;
		line-height: 40rpx;
		font-weight: 500;
	}
	.map-button {
		width: 80%;
		height: 80rpx;
		text-align: center;
		background-color: #04BE02;
		line-height: 80rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #fff;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.nav-title {
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.back-img {
		width: 45rpx;
		height: 45rpx;
	}
</style>
